<template>
    <div class="son8">
        <h3>SonDemo8</h3>
        <h3>通过泛型参数来定义 props 的类型：3.4&3.5</h3>
        <p> title: {{ title }}</p>
        <p>user: {{ user }}</p>
        <p>msg: {{ msg }}</p>

        <h3>触发与监听事件，事件参数</h3>
        <h3>直接使用 $emit 方法触发自定义事件,且在触发事件时附带特定的参数</h3>
        <button type="button" @click="$emit('sonEmit', 8, '字符串嘿嘿嘿', { name: '小强' })">emit触发父组件绑定子组件上的函数</button>
    </div>
</template>

<script setup lang="ts">
export interface Iuser {
    name: string
    sex: string
    age: number
}

// 响应式解构 props 解构 3.5
const {
    title = 'Son8默认标题',
    user,
    msg,
} = defineProps<{
    title?: string
    user: Iuser
    msg?: string
}>()


</script>

<style lang="scss" scoped>
.son8 {
    padding: 10px;
    margin: 10px;
    border: 3px solid purple;
}
</style>